﻿<!DOCTYPE html>     
     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1">     
<link rel="stylesheet" href="jquery.mobile.min.css" />     
<script src="jquery-2.1.4.min.js"></script>     
<script src="jquery.mobile.min.js"></script>     
</head>               
<body>
	<div data-role="page">
    	<div data-role="header" data-position="fixed" data-fullscreen="true">
        	<a href="#">返回</a>    
            <h1>今日新闻</h1>    
            <a href="#">设置</a>
        </div>
			<ul data-role="listview" style="margin-top:45px;">
				<li data-role="list-divider">8月27日 星期二<span class="ui-li-count">4</span></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li data-role="list-divider">8月26日 星期一<span class="ui-li-count">3</span></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
				<li><a href="#">
					<img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" />
					<h2>jQuery Mobile实战发布</h2>
					<p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p>
					<p class="ui-li-aside"><strong>6:24</strong>PM</p>
				</a></li>
			</ul>
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
			<div data-role="navbar">
				<ul>
					<li><a id="chat" href="#" data-icon="custom">今日新闻</a></li>        
					<li><a id="email" href="#" data-icon="custom">国内新闻</a></li>        
					<li><a id="skull" href="#" data-icon="custom">国际新闻</a></li>        
					<li><a id="beer" href="#" data-icon="custom">设置</a></li>         
				</ul>
			</div>
		</div>
    </div>
</body>
</html>
